<script lang="ts">
	import { onMount } from 'svelte';

	import Highcharts from 'highcharts';
    import ExportingModule from 'highcharts/modules/exporting';
	import { Chart } from '@highcharts/svelte';

	import { sidebar, angle1, angle2, Motor_1_chart, Motor_2_chart, mo1, mo2, x_labels_num, tor1, tor2 } from '$lib/data';
    // import { Button, Chart } from 'flowbite-svelte';


	let x_labels:Array<string> = $state([]);

	let mo1_angle:Array<number> = $state([]);
	let mo2_angle:Array<number> = $state([]);
	let mo1_torque:Array<number> = $state([]);
	let mo2_torque:Array<number> = $state([]);

	let Motor_1_options_sidebar: Highcharts.Options = $state({});
	let Motor_2_options_sidebar: Highcharts.Options = $state({});

	let Motor_1_options_nosidebar_tor: Highcharts.Options = $state({});
	let Motor_1_options_nosidebar_speed: Highcharts.Options = $state({});
	let Motor_2_options_nosidebar_tor: Highcharts.Options = $state({});
	let Motor_2_options_nosidebar_speed: Highcharts.Options = $state({});

	let options: any = $state();

    // function value1add(num:number) {
	// 	if (value1.length < 15){
	// 		value1.push(num);
	// 	}else{
	// 		[value1[0], ...value1] = value1.slice(0);
	// 		value1.push(num);
	// 	}
	// };
	// function value2add(num:number) {
	// 	if (value2.length < 15){
	// 		value2.push(num);
	// 	}else{
	// 		[value2[0], ...value2] = value2.slice(0);
	// 		value2.push(num);
	// 	}
	// };
	// function mo1add(num:number) {
	// 	$mo1.push(num);
	// };
	// function mo2add(num:number) {
	// 	$mo2.push(num);
	// };

	function value1_update() {
		mo1_angle = $mo1.slice(-15);
		mo1_torque = $tor1.slice(-15);
	};
	function value2_update() {
		mo2_angle = $mo2.slice(-15);
		mo2_torque = $tor2.slice(-15);
	};

	angle1.subscribe(v => {
		// value1add(v);
		// mo1add(v);
		value1_update();
	});
	angle2.subscribe(v => {
		// value2add(v);
		// mo2add(v);
		value2_update();
	});

    ExportingModule(Highcharts);

	$effect(() => {
		Motor_1_options_sidebar = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#fa4b42", "#feb56a"],
			title: {
				text: '上臂'
			},
			series: [{
				name: "主动肘关节扭矩",
				data: mo1_torque,
				dashStyle: 'longdash',
				lineWidth: 4
			},{
				name: "被动肘关节角度",
				data: mo1_angle
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: x_labels
			},
			yAxis:{
				title:{
					text:'扭矩(N·m)'
				}
			}
		};
		Motor_2_options_sidebar = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#fa4b42", "#feb56a"],
			title: {
				text: '前臂'
			},
			series: [{
				name: "主动肩关节扭矩",
				data: mo2_torque,
				dashStyle: 'longdash',
				lineWidth: 4
			},{
				name: "被动肩关节角度",
				data: mo2_angle
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: [
					x_labels[0], x_labels[1], x_labels[2], x_labels[3],
					x_labels[4], x_labels[5], x_labels[6], x_labels[7],
					x_labels[8], x_labels[9], x_labels[10], x_labels[11],
					x_labels[12], x_labels[13], x_labels[14], x_labels[15]
				]
			},
		};

		Motor_1_options_nosidebar_tor = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#fa4b42"],
			title: {
				text: '主动肩关节扭矩'
			},
			series: [{
				name: "扭矩",
				data: mo2_torque,
				dashStyle: 'longdash',
				lineWidth: 4
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: [
					x_labels[0], x_labels[1], x_labels[2], x_labels[3],
					x_labels[4], x_labels[5], x_labels[6], x_labels[7],
					x_labels[8], x_labels[9], x_labels[10], x_labels[11],
					x_labels[12], x_labels[13], x_labels[14], x_labels[15]
				]
			},
			yAxis:{
				title:{
					text:'扭矩(N·m)'
				}
			}
		};
		Motor_1_options_nosidebar_speed = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#feb56a"],
			title: {
				text: '被动肩关节角度'
			},
			series: [{
				name: "角度",
				data: mo2_angle
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: [
					x_labels[0], x_labels[1], x_labels[2], x_labels[3],
					x_labels[4], x_labels[5], x_labels[6], x_labels[7],
					x_labels[8], x_labels[9], x_labels[10], x_labels[11],
					x_labels[12], x_labels[13], x_labels[14], x_labels[15]
				]
			},
			yAxis:{
				title:{
					text:'角度(°)'
				},
				labels: {
					formatter:function(){
						if(this.value <= 30) {
							return "安全("+this.value+")";
						}else if(this.value > 30 && this.value <= 90) {
							return "锻炼("+this.value+")";
						}else {
							return "危险("+this.value+")";
						}
					}
				},
				max: 120,
			}
		};
		Motor_2_options_nosidebar_tor = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#fa4b42"],
			title: {
				text: '主动肘关节扭矩'
			},
			series: [{
				name: "扭矩",
				data: mo1_torque,
				dashStyle: 'longdash',
				lineWidth: 4
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: [
					x_labels[0], x_labels[1], x_labels[2], x_labels[3],
					x_labels[4], x_labels[5], x_labels[6], x_labels[7],
					x_labels[8], x_labels[9], x_labels[10], x_labels[11],
					x_labels[12], x_labels[13], x_labels[14], x_labels[15]
				]
			},
			yAxis:{
				title:{
					text:'扭矩(N·m)'
				}
			}
		};
		Motor_2_options_nosidebar_speed = {
			chart: {
				type: 'spline',
				width: 390,
				height: 330,
				backgroundColor: 'rgba(0,0,0,0)' 
			},
			colors:["#feb56a"],
			title: {
				text: '被动肘关节角度'
			},
			series: [{
				name: "角度",
				data: mo1_angle
			}],
			credits: {
				enabled: false // 不显示版权 logo
			},
			tooltip:{
				style:{
					fontSize:28
				},
			},
			xAxis:{
				title:{
					text:'时间'
				},
				categories: [
					x_labels[0], x_labels[1], x_labels[2], x_labels[3],
					x_labels[4], x_labels[5], x_labels[6], x_labels[7],
					x_labels[8], x_labels[9], x_labels[10], x_labels[11],
					x_labels[12], x_labels[13], x_labels[14], x_labels[15]
				]
			},
			yAxis:{
				title:{
					text:'角度(°)'
				},
				labels: {
					formatter:function(){
						if(this.value <= 30) {
							return "安全("+this.value+")";
						}else if(this.value > 30 && this.value <= 90) {
							return "锻炼("+this.value+")";
						}else {
							return "危险("+this.value+")";
						}
					}
				},
				max: 120,
			}
		};

		// options = {
		// 	chart: {
		// 		width: 390,
		// 		height: 330,
		// 		type: 'line',
		// 		fontFamily: 'Inter, sans-serif',
		// 		dropShadow: {
		// 			enabled: false
		// 		},
		// 		toolbar: {
		// 			show: false
		// 		}
		// 		},
		// 		tooltip: {
		// 		enabled: true,
		// 		x: {
		// 			show: false
		// 		}
		// 		},
		// 		dataLabels: {
		// 		enabled: false
		// 		},
		// 		stroke: {
		// 		width: 6,
		// 		curve: 'smooth'
		// 		},
		// 		grid: {
		// 		show: true,
		// 		strokeDashArray: 4,
		// 		padding: {
		// 			left: 2,
		// 			right: 2,
		// 			top: -26
		// 		}
		// 	},
		// 	series: [
		// 	{
		// 		name: 'Clicks',
		// 		data: value1,
		// 		color: '#1A56DB'
		// 	},
		// 	// {
		// 	// 	name: 'CPC',
		// 	// 	data: value2,
		// 	// 	color: '#7E3AF2'
		// 	// }
		// 	],
		// 	legend: {
		// 		show: false
		// 	},
		// 	xaxis: {
		// 		categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'],
		// 	labels: {
		// 		show: true,
		// 		style: {
		// 		fontFamily: 'Inter, sans-serif',
		// 		cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
		// 		}
		// 	},
		// 	axisBorder: {
		// 		show: false
		// 	},
		// 	axisTicks: {
		// 		show: false
		// 	}
		// 	},
		// 	yaxis: {
		// 	labels: {
		// 		show: true,
		// 		style: {
		// 		fontFamily: 'Inter, sans-serif',
		// 		cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
		// 		}
		// 	}
		// 	},
		// };
	});

	onMount(() => {
		
	});
</script>

<div class="grid place-items-center grid-cols-1">
	{#if $Motor_1_chart}
		{#if $sidebar}
		<div>
			<Chart options={Motor_1_options_sidebar} highcharts={Highcharts}/>
			<!-- <Chart {options} /> -->
		</div>
		{:else}
		<div class="grid place-items-center grid-cols-2">
			<Chart options={Motor_1_options_nosidebar_tor} highcharts={Highcharts}/>
			<Chart options={Motor_1_options_nosidebar_speed} highcharts={Highcharts}/>
		</div>
		{/if}
	{/if}

	{#if $Motor_2_chart}
		{#if $sidebar}
		<div>
			<Chart options={Motor_2_options_sidebar} highcharts={Highcharts}/>
		</div>
		{:else}
		<div class="grid place-items-center grid-cols-2">
			<Chart options={Motor_2_options_nosidebar_tor} highcharts={Highcharts}/>
			<Chart options={Motor_2_options_nosidebar_speed} highcharts={Highcharts}/>
		</div>
		{/if}
	{/if}
</div>